<!DOCTYPE html>
<html lang="en" style="font-size: 23px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/common.js"></script>
    <style>
        .aa{
            font-size: 7vw;
        }
        .box{
            background-color: rebeccapurple;
            height: 100px;
            width: 40%;
            display: inline-block;
        }
        .box1{
            background-color: red;
            height: 100px;
            width: 40%;
            display: inline-block;

        }
    </style>
</head>
<body>
    <!-- 
        1、响应式页面布局：项目随屏幕大小变化，通过调整元素布局方式实现，在多屏幕下的合理展示
            使用 @media 实现
        2、移动端适配：在移动设备上进行网站访问时，不会因为屏幕大小变化导致 页面布局产生错乱
            因为屏幕碎片化的问题，需要实现一套移动样式代码完成多种屏幕的页面适配
            -> 依据 屏幕宽度作为 适配标准
            方式1：移动端项目统一使用 rem 单位 - 结果计算相对于 HTML 元素的 font-size 取值计算
    -->
</body>
    <h1 class="aa">响应式页面布局：项目随屏</h1>
    <div>响应式页面布局：项目随屏幕大小变化，</div>
    <div class="box"></div>
    <div class="box1"></div>
    <p style="font-size: 10%;">响应式页面布局：项目随屏幕大小变化</p>
    <p style="font-size: 23px">响应式页面布局：项目随屏幕大小变化</p>
    <p style="font-size: 1rem">响应式页面布局：项目随屏幕大小变化</p>


</html>